<script setup>
	import {
		ref,
		computed
	} from "vue"
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	import {
		getPageQuestionReq,
		submitExamReq,
	} from "@/pages_nbst/api/exam.js"
	import Single from "@/pages_nbst/components/question/Single.vue"
	import Mult from "@/pages_nbst/components/question/Mult.vue"
	import LingExamCard from "@/pages_nbst/components/LingExamCard.vue"

	let query = {}
	onLoad((q) => {
		console.log('onload', q);
		query = q
		getPageQuestionReq(query.pageId).then(res => {
			console.log(res);
			uni.setNavigationBarTitle({
				title: `${res.label}(${res.total_score}分)`
			})
			dataList = res.questions.map(v => {
				v.question_detail.options.forEach(v => {
					v.answer = 0
				})
				return {
					bookQuestionId: v.book_question_id,
					pageQuestionId: v.id,
					questionId: v.question_id,
					type: v.question_detail.type,
					content: v.question_detail.content,
					options: v.question_detail.options,
					score: v.score,
				}
			})
			initSwiper()
		})
	})
	const initSwiper = () => {
		swiperList.value = []
		swiperIndex.value = 0
		total.value = dataList.length

		dataList.forEach((v, i) => {
			v.isEdit = v?.isEdit || false
			if (i < 3) {
				swiperList.value.push(v)
			} else {
				swiperList.value.push({
					isEdit: v.isEdit
				})
			}
		})
	}

	const swiperIndex = ref(0)
	const total = ref(0)
	let dataList = []
	const swiperList = ref([])
	const progress = computed(() => {
		return total.value === 0 ? 0 : (swiperIndex.value + 1) * 100 / total.value
	})

	const onClickSub = () => {
		let list = []
		for (var i = 0; i < dataList.length; i++) {
			if (!dataList[i].isEdit) {
				list.push(i + 1)
			}
		}
		if (list.length > 0) {
			uni.showModal({
				title: "温馨提示",
				content: "第" + list.join('、') + '题还未解答，是否继续提交',
				confirmColor: "#ff0000",
				confirmText: "确认提交",
				cancelText: '继续答题',
				success: (res) => {
					if (res.confirm) {
						submitExam()
					} else {
						examCardShow.value = true
					}
				}
			})
		} else {
			submitExam()
		}
	}
	const submitExam = () => {
		const data = JSON.parse(JSON.stringify(dataList))
		const temp = []

		for (var i = 0; i < data.length; i++) {
			const answers = []
			let correct = true
			data[i].options.forEach(v => {
				if (v.answer === 1) {
					answers.push(v.id)
				}
				if (v.answer !== v.checked) {
					correct = false
				}
			})
			temp.push({
				bookQuestionId: data[i].bookQuestionId,
				pageQuestionId: data[i].pageQuestionId,
				questionId: data[i].questionId,
				answers,
				correct: correct ? 1 : 0,
				score: correct ? data[i].score : 0,
			})
		}
		submitExamReq(query.examId, query.pageId, {list: temp, subjectId: query.subjectId}).then(res => {
			uni.showToast({
				title:"完成！！"
			})
			uni.navigateBack()
		})
	}
	const onHandleOver = () => {
		console.log('onHandleOver');
	}
	const countDown = ref(true)
	const tabbarRef = ref()
	const bodyHeight = computed(() => {
		// uv-line-progress - height  2px 
		return tabbarRef.value?.placeholderHeight ? `calc(100% - ${tabbarRef.value.placeholderHeight + 2}px)` :
			`100%`
	})


	const onHandlerSwiperChange = (e) => {
		swiperIndex.value = e.detail.current
		handleSwiperItem()
	}
	const handleSwiperItem = () => {
		[-2, -1, 0, 1, 2].forEach(v => {
			const ii = swiperIndex.value + v
			if (ii + 1 <= dataList.length && ii >= 0) {
				if (swiperList.value[ii]?.id === undefined) {
					// console.log('ii111-------', ii);
					swiperList.value[ii] = dataList[ii]
				}
			}
		});
	}

	const examCardShow = ref(false)
	const onClickJumpQ = (i) => {
		swiperIndex.value = i
		handleSwiperItem()
		setTimeout(() => {
			examCardShow.value = false
		}, 300)
	}
</script>

<template>
	<view v-if="countDown" class="count-down">
		<image src="/pages_nbst/static/images/home/lock.png" mode="widthFix" style="width: 36rpx;height: auto;" />
		<uv-count-down :time="10 * 1000" format="HH:mm:ss" @finish="onHandleOver" />
	</view>
	<uv-line-progress :percentage="progress" :showText="false" height="2" />
	<view v-if="total" style="position: absolute;top: 40rpx;right: 40rpx;">
		<span style="font-size: 50rpx;">{{swiperIndex+1}}</span> <span style="color: #a8a8a8;">/{{total}}</span>
	</view>
	<swiper :style="{height: bodyHeight}" @change="onHandlerSwiperChange" :current="swiperIndex">
		<swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index">
			<view style="height: 20rpx;"></view>
			<view style="padding: 20rpx;">
				<Single v-if="item.type === 1" :data="item" />
				<Mult v-else-if="item.type === 2" :data="item" />
				<view v-else />
				<view style="display: flex;justify-content: center;margin: 70rpx auto;">
					<view style="padding: 10rpx 40rpx;background-color: #6a8bc7;">
						<text v-if="total > swiperIndex + 1" style="color: white;">向左滑动，进入下一题</text>
						<text v-else style="color: white;">答题已完成，请检查后提交</text>
					</view>
				</view>
				<view style="height: 10rpx;"></view>
			</view>
		</swiper-item>
	</swiper>

	<uv-tabbar ref="tabbarRef" :iconSize=25 :fixed="true" inactiveColor="#4e4e4e" activeColor="#4e4e4e">
		<uv-tabbar-item text="答题卡" icon="/pages_nbst/static/images/home/edit.png" @click="examCardShow = true" />
		<uv-tabbar-item text="提交" icon="/pages_nbst/static/images/home/sub.png" @click="onClickSub" />
	</uv-tabbar>
	<LingExamCard v-if="examCardShow" :localdata="dataList" @cancel="examCardShow = false" @success="onClickSub"
		@click1="onClickJumpQ" />
</template>

<style scoped lang="scss">
	.count-down {
		position: absolute;
		top: 0;
		z-index: 10;
		display: flex;
		justify-content: center;
		width: 100%;
		align-items: center;
		gap: 10rpx;
	}

	.swiper {}

	.swiper-item {
		overflow-y: auto;
	}
</style>

<style>
	page {
		height: 100%;
	}
</style>